<template>
  <view class="u-calendar-header">
    <!-- u-border-bottom -->
    <!-- <text class="u-calendar-header__title" v-if="showTitle">{{ title }}</text>
    <text class="u-calendar-header__subtitle" v-if="showSubtitle">
      {{ subtitle }}
    </text> -->
    <u-navbar v-if="showTitle">
      <template #center>
        <view
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            font-weight: bold;
          "
          @click="modalshow"
        >
          <text style="margin-right: 8rpx">{{ subtitle }}</text>
          <u-icon name="arrow-down-fill" color="#C1C5C9" size="12"></u-icon>
        </view>
      </template>
    </u-navbar>
    <view
      class="u-calendar-header__subtitle2"
      v-if="!showSubtitle"
      @click="modalshow"
    >
      <view class="u-flex text">
        {{ subtitle }}
        <!-- {{ defaultDate }}55 -->
        <u-icon
          style="margin-left: 12rpx"
          name="arrow-down-fill"
          color="rgba(193, 197, 201, 1)"
          size="12px"
        ></u-icon>
      </view>
      <u--image
        :src="$z.imgsrc('3149fa79e12f4d04a82e9a27f5fc1e5f.png')"
        width="97px"
        height="38.5px"
      ></u--image>
    </view>
    <view class="u-calendar-header__weekdays">
      <text class="u-calendar-header__weekdays__weekday">日</text>
      <text class="u-calendar-header__weekdays__weekday">一</text>
      <text class="u-calendar-header__weekdays__weekday">二</text>
      <text class="u-calendar-header__weekdays__weekday">三</text>
      <text class="u-calendar-header__weekdays__weekday">四</text>
      <text class="u-calendar-header__weekdays__weekday">五</text>
      <text class="u-calendar-header__weekdays__weekday">六</text>
    </view>
    <u-datetime-picker-index
      :show="show"
      v-model="datetimevalue"
      mode="date"
      @confirm="confirm"
      @close="close"
    ></u-datetime-picker-index>
  </view>
</template>

<script>
  import dayjs from "../../libs/util/dayjs.js";
  export default {
    name: "u-calendar-header",
    mixins: [uni.$u.mpMixin, uni.$u.mixin],
    props: {
      // 标题
      title: {
        type: String,
        default: "",
      },
      // 副标题
      subtitle: {
        type: String,
        default: "",
      },
      // 是否显示标题
      showTitle: {
        type: Boolean,
        default: true,
      },
      // 是否显示副标题
      showSubtitle: {
        type: Boolean,
        default: true,
      },
      // 默认选中的日期，mode为multiple或range是必须为数组格式
      selected: {
        type: Array,
        default: null,
      },
    },
    data() {
      return {
        show: false,
        datetimevalue: Number(new Date()),
      };
    },
    methods: {
      name() {},
      modalshow() {
        let defaultDate = this.selected ? this.selected[0] : new Date();
        this.datetimevalue = Number(dayjs(defaultDate));
        this.show = true;
      },
      confirm(data) {
        this.$emit("monthSelected", [dayjs(data.value).format("YYYY-MM-DD")]);
        this.show = false;
      },
      close() {
        this.show = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import "../../libs/css/components.scss";

  .u-calendar-header {
    padding-bottom: 4px;

    &__title {
      font-size: 16px;
      color: $u-main-color;
      text-align: center;
      height: 42px;
      line-height: 42px;
      font-weight: bold;
    }

    &__subtitle {
      font-size: 14px;
      color: $u-main-color;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-weight: bold;
    }

    &__subtitle2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      padding-left: 12px;
      color: $u-main-color;
      height: 56px;
      // text-align: left;
      // line-height: 56px;
      font-weight: bold;
      display: flex;
      flex-direction: initial;

      .text {
        flex-direction: initial;
      }
    }

    &__weekdays {
      @include flex;
      justify-content: space-between;

      &__weekday {
        font-size: 13px;
        color: rgba(131, 133, 137, 1);
        line-height: 30px;
        flex: 1;
        text-align: center;
      }
    }
  }
</style>
